<template>
  <div>
    <div style="margin:10px 0">
      <Button type="info" @click="modal6 = true">新增</Button>
      <Button type="success">修改</Button>
      <Button type="warning">删除</Button>
    </div>
    <div>
      <Table border stripe :columns="columns" :data="data"></Table>
    </div>
    <Modal v-model="modal6" title="新增" :loading="loading" @on-ok="asyncOK">
      <div>
        <Form :model="form" :label-width="80">
          <FormItem label="菜单名">
            <Input v-model="form.name" placeholder="请输入菜单名" />
          </FormItem>
          <FormItem label="菜单">
            <Select v-model="form.leve">
              <Option value="请选择">请选择</Option>
              <Option value="1">一级菜单</Option>
              <Option value="2">二级菜单</Option>
            </Select>
          </FormItem>
          <FormItem label="属于">
            <Input v-model="form.belong" placeholder="请选择属于哪一个" />
          </FormItem>
        </Form>
      </div>
    </Modal>
    <div style="margin-top:10px;">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="currentpage"
        @on-change="change"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      pageSize: 10,
      currentpage: 1,
      total: 0,
      form: {},
      modal6: false,
      loading: true,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "菜单",
          key: "name"
        },
        {
          title: "分类",
          key: "leve"
        },
        {
          title: "属于",
          key: "belong"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    change(page) {
      this.currentpage = page;
      this.getData();
    },
    show(item) {
      this.modal6 = true;
      this.form = item;
    },
    remove(item) {
      if (confirm("确定要删除这一项吗？")) {
        this.$Spin.show();
        axios({
          method: "delete",
          url: "http://localhost/api.php/type/" + item.id
        }).then(() => {
          this.getData();
          this.$Spin.hide();
        });
      }
    },
    asyncOK() {
      this.$Spin.show();
      let method = "post",
        url = "http://localhost/api.php/type";
      if (this.form.id) {
        (method = "put"),
          (url = "http://localhost/api.php/type/" + this.form.id);
      }
      axios({
        method,
        url,
        data: this.form
      }).then(() => {
        this.getData();
        this.$Spin.hide();
        this.loading = false;
        this.modal6 = false;
      });
    },
    getData() {
      this.$Spin.show();
      axios({
        method: "get",
        url: "http://localhost/api.php/type",
        params: {
          transform: 1,
          order: "id,desc",
          // page: "1,10"
          page: `${this.currentpage},${this.pageSize}`
        }
      }).then(res => {
        this.data = res.data.type;
        this.total = res.data._results
        this.$Spin.hide();
      });
    }
  }
};
</script>

<style>
</style>